<template>
  <div>
    <el-form :model="data" label-width="120px" class="form-baseinfo">
      <el-row>
        <el-col :span="24">
          <p class="title">订单基本信息</p>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单号" prop="waybillNo">
            <el-input v-model="data.waybillNo" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="员工卡号" prop="waybillType">
            <el-input v-model="data.waybillNo" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="员工姓名" prop="waybillStatus">
            <el-input v-model="data.waybillNo" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="订单状态" prop="transportType">
            <el-select v-model="data.transportType" placeholder="" style="width: 294px">
              <el-option :key="0" disabled :value="0" label="未知" />
              <el-option :key="1" disabled :value="1" label="汽运" />
              <el-option :key="2" disabled :value="2" label="海运" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结算时间" prop="shipmentsTime">
            <el-input v-model="data.shipmentsTime" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单金额" prop="receivingTime">
            <el-input v-model="data.receivingTime" readonly />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="操作人" prop="priorityStr">
            <el-input v-model="data.priorityStr" readonly />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-baseinfo">
      <el-row>
        <el-col :span="24">
          <p class="title">订单产品信息</p>
        </el-col>
      </el-row>
      <LPTablePage
        :show-index="true"
        :show-indexfixed="false"
        index-label="序号"
        :table-data="tableData"
        :table-column="tableColumn"
        :show-page="false"
        align="center"
      />
      <el-row style="margin-top: 10px">
        <el-col :span="24">
          <span>汇总：一共0件商品，总金额0元</span>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 10px">
      <el-button type="primary">关闭</el-button>
      <el-button type="primary">结算</el-button>
    </div>
  </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  components: { LPTablePage },
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      tableData: [],
      // 表格字段
      tableColumn: [
        { label: '产品编号', prop: 'goodsName' },
        { label: '商品名称', prop: 'spec' },
        // {label: "单位", prop: "unit"},
        { label: '产品销售单价', prop: 'number' },
        { label: '数量', prop: 'allotNumber' },
        { label: '产品总价', prop: 'weight' },
        { label: '产品定价(单价)', prop: 'totalWeight' }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.form-baseinfo {
  border: 1px solid #dcdfe6;
  padding: 10px;

  .title {
    font-size: 16px;
    font-weight: 600;
  }
}

::v-deep .delayShipmentsTime {
  .red {
    color: $high_risk_color;
  }
}
</style>
